<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jStars, a jquery star rating plugin by David Gonzalez</title>
<style type="text/css">
body{
	background-color:#E9E9E9;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#333;
	font-size:1em;
}
h1,h2,h3,h4{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-shadow: 0px 0px 1px #FFF;
	margin:1em 0 .35em 0;
}
h1{
	font-size:4em;
}
h2{
	font-size:3em;
	border-bottom:1px solid #999;
}
h3{
	font-size:1.75em;
	border-bottom:1px solid #eee;
}
h4{
	font-size:1.25em;
}
a, a:visited{
	text-decoration:none;
	color:#369;
}
a:hover{
	text-decoration:none;
}
pre {
  	margin: 15px;
  	padding: 1px 30px 0;
  	text-align: left;
  	display: block;
  	overflow: auto;
  	font: 500 1em/20px 'Lucida Console', 'Courier New', Monospace ;
  	white-space: pre;
  	border-width:1px 1px 1px 3px;
  	border-style: solid;
  	border-color:#DCDCDC;
  	border-bottom-right-radius: 5px;
  	border-top-right-radius: 5px;
  	-moz-border-radius-bottomright: 5px;
  	-moz-border-radius-topright: 5px;
	background: #FFF url(http://lh5.ggpht.com/_Xhs4pm9zQzw/S5PECNQxMAI/AAAAAAAABeo/KTq6zNOxLfI/d/code_bg.gif);
	background:url(http://lh4.ggpht.com/_Xhs4pm9zQzw/S5PA-jQe0eI/AAAAAAAABeY/esb3rEqeffU/d/code_nums.png) 1px left repeat-y, url(http://lh5.ggpht.com/_Xhs4pm9zQzw/S5PECNQxMAI/AAAAAAAABeo/KTq6zNOxLfI/d/code_bg.gif) -20px left repeat;
}
code {
  	font: 500 1em/20px 'Lucida Console', 'Courier New', Monospace ;
  	white-space: pre;
}
#main{
	background-color:#FFF;
	border-radius:16px;
	-moz-border-radius: 16px;
	border:5px solid #CCC;
	padding: 10px 35px 35px;
	margin:55px;
}
#footer{
	border-radius:7px;
	border:1px solid #CCC;
	padding:10px;
	margin:30px 0 0 0;
}
.rating {
	margin:0 20px 0 0;	
	display: inline-block;
}
.strikethrough {
	text-decoration:line-through;
}
.demo {
  	margin: 15px 10px;
  	padding: 20px;
  	display: block;
  	border-width:1px;
  	border-style: dashed;
  	border-color:#DCDCDC;
  	border-radius: 5px;
  	-moz-border-radius: 5px;
}
.mr{
	margin-left:15px;
	}
</style>
</head>
<body>
<div id="main">
<h1 align="center"><img src="logo.png" alt="jStars Logo" /></h1>
<h2>Contents</h2>
    <ul>
    <li><a href="#Overview">Overview</a></li>
    <li><a href="#Features">Features</a></li>
    <li><a href="#Compatibility">Compatibility</a></li>
    <li><a href="#Usage">Usage</a>
        <ul>
        <li><a href="#Dependencies">Dependencies</a></li>
        <li><a href="#Creating">Creating and setting</a></li>
        <li><a href="#Methods">Methods</a></li>
        <li><a href="#Styling">Styling</a></li>
        </ul>
    <li><a href="#Demos">Demos</a></li>
    <li><a href="#Download">Download</a></li>
    <li><a href="#ToDoList">To Do List</a></li>
    <li><a href="#Licensing">Licensing & Terms of Use</a></li>
    </ul>

<h2><a name="Overview"></a>Overview</h2>
  <div class="mr">jStars is a plugin for the jQuery javascript library that creates a non-obstrusive star rating control.
  </div>

<h2><a name="Features"></a>Features</h2>
    <ul>
   	  <li>Very fast!</li>
        <li>Lightweight, only 2.6KB.</li>
        <li>You can rating zero, most others can not</li>
        <li>Easy to configure and implement.</li>
        <li>Step option capable.</li>
        <li>Customizeable.</li>
        <li>Valid XHTML.</li>
        <li>Ability to change options on the fly.</li>
        <li>Ability to enable/disable on the fly.</li>
  </ul>

<h2><a name="Compatibility"></a>Compatibility</h2>
	<div class="mr">jStars is compatible with all modern browsers:</div>
    <ul>
        <li>Chrome</li>
        <li>Firefox 2 +</li>
        <li>Safari 3 +</li>
        <li>Opera 9 +</li>
        <li><span class="strikethrough">Internet Explorer 7, 8</span> (I am working to solve this)</li>
        <li class="strikethrough">Internet Explorer 6</li>
    </ul>
	

<h2><a name="Usage"></a>Usage</h2>
	<div class="mr">
	<h3><a name="Dependencies"></a>Dependencies</h3>
    	<div class="mr">jStars requires <a href="http://jquery.com/" target="_blank">jQuery</a>. I'm not sure which is the minimum required version for this plugin, I recommend the last known.</div>
	<h3><a name="Creating"></a>Creating</h3>
    <div class="mr">To create a star rating control simply have to add a bit of HTML and JavaScript:
    <h4>Html:</h4>
        <pre class="html">&lt;div id="rating"&gt;&lt;/div&gt;</pre>
        <h4>JavaScript:</h4>
        <pre class="js">$('#rating0').stars( {settings} );</pre>
        <h4>Parameters:</h4>
			<ul>
          		<li><code>rated</code>: If true, can not rating.</li>
                <li><code>stars</code>: Number of stars.</li>
                <li><code>step</code>: Accuracy of voting rating control</li>
                <li><code>val</code>: Initial value (between 0 and the number of stars)</li>
                <li><code>img</code>: Image URL.</li>
                <li><code>imgw</code>: Image width</li>
                <li><code>imgh</code>: Image height/3 or height of a star. If not defined, is the same as imgw</li>
                <li><code>onchange</code>: This function is called when the value changes (mouse hover and method).</li>
                <li><code>onrating</code>: This function is called on mouse click hover rating control.</li>
            </ul>
    </div>
        
    <h3><a name="ChangingDefaults"></a>Changing defaults</h3>
<div class="mr">
   		<h4>Defaults:</h4>
			<pre class="js">
$.fn.stars.defaults = {
	rated: false,
	stars: 5,
	step:  1,
	val:   0,
	img:   "jStars.png",
    imgw:  28,
    imgh:  28,
	onchange: function(v){},
	onrating: function(v){}
};
			</pre>
		<h4>Changing one:</h4>
			<pre class="js">$.fn.stars.defaults.rated = true;</pre>
	  </div>
 
	<h3><a name="Methods"></a>Methods</h3>
    <ul>
    	<li><code>val</code>: Get or sets the value</li>
        <li><code>rated</code> get or set the status of rating control</li>
        <!--<li><code>redraw</code></li>-->
      <li class="strikethrough"><code>destroy</code></li>
    </ul>
    <button id="btn0">Get val</button>
	<h3><a name="Styling"></a>Styling</h3>
</div>
<h2><a name="Demos"></a>Demos</h2>
<div class="mr">
	<h4>Basic demo:</h4>
    	<pre class="js">$('#rating0').stars();</pre>
		<div class="demo">
			<div class="rating" id="rating0"></div>
    	</div>
        
    <h4>val:</h4>
        <pre class="js">$('#rating2').stars({ val:3.4 })</pre>
        <div class="demo"><div class="rating" id="rating2"></div><spam id="t2"></spam><br /></div>    

	<h4>Step:</h4><pre class="js">
$('#rating4').stars({ step: 1 });
$('#rating5').stars({ step:.5 });
$('#rating6').stars({ step:.1 });</pre>
		<div class="demo">
        	<div class="rating" id="rating4"></div><spam id="t4"></spam><br />
            <div class="rating" id="rating5"></div><spam id="t5"></spam><br />
            <div class="rating" id="rating6"></div><spam id="t6"></spam><br />
        </div>
        
        <h4>Stars:</h4><pre class="js">
$('#rating7').stars({ stars: 1, step:.1 });
$('#rating8').stars({ stars: 1 });
$('#rating9').stars({ stars: 10 });</pre>
         	<div class="demo">
                <div class="rating" id="rating7"></div><spam id="t7"></spam><br />
                <div class="rating" id="rating8"></div><spam id="t8"></spam><br />
                <div class="rating" id="rating9"></div><spam id="t9"></spam><br />
			</div>

		<h4>Rated:</h4>
        	<pre class="js">$('#rating10').stars({ rated:true, val:2.5 });</pre>
        	<div class="demo"><div class="rating" id="rating10"></div><spam id="t10"></spam></div>

		<h4>onChange:</h4>
			<pre class="js">$('#rating1').stars({
  onchange: function(v){
    $('#t1').html(':' + v );
  }
});</pre>
			<div class="demo"><div class="rating" id="rating1"></div><spam id="t1"></spam></div>

		<h4>onRating:</h4>
			<pre class="js">$('#rating3').stars({
  onrating: function(v){
    alert(v);
  }
});</pre>
			<div class="demo"><div class="rating" id="rating3"></div><spam id="t3"></spam><br /></div>
</div>

<h2><a name="Download"></a>Download</h2>
<div class="mr">
  Download this page (plugin+examples) on a zip file: <a href="jStars.zip">jStars.zip</a>
</div>
<h2><a name="ToDoList"></a>To Do List</h2>
<ul>
	<li>Make a php script that works with this plugin.</li>
    <li>Discover why jquery.js fails in IE browsers using this plugin.</li>
    <li>Pevent repeated calls to onchange function.</li>
</ul>
<h2><a name="Licensing"></a>Licensing & Terms of Use</h2>
<div class="mr">This plugin is licensed under the GNU Lesser General Public License (LGPL) and is copyright 2010 David Gonzalez García.</div>


<div id="footer">&copy;2010 David Gonzalez Garcia - <a href="http://davidxl.blogspot.com">davidxl.blogspot.com/</a></div>
</div>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type="text/javascript" src="http://jquery-chili-js.googlecode.com/svn/trunk/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="http://jquery-chili-js.googlecode.com/svn/trunk/chili/recipes.js"></script>
<script type="text/javascript" src='jStars.js'></script>
<script>
$(document).ready(function() {
	$('pre' ).chili();
	$('#btn0').click(function(){alert($('#rating9').stars("val"))});
	$('#rating0').stars();
	$('#rating1').stars({step:1,onchange: function(v){$('#t1').html(':' + v )}});
	$('#rating2').stars({val:3.4,onchange: function(v){$('#t2').html(v)}});
	$('#rating3').stars({step:.1,onrating: function(v){alert(v);},onchange: function(v){$('#t3').html(v)}});
	$('#rating4').stars({step:1,onchange: function(v){$('#t4').html(v)}});
	$('#rating5').stars({step:.5,onchange: function(v){$('#t5').html(v)}});
	$('#rating6').stars({step:.1,onchange: function(v){$('#t6').html(v)}});
	$('#rating7').stars({stars: 1, step:.1, val: 0, onchange: function(v){$('#t7').html(v*10)}});
	$('#rating8').stars({stars: 1, step:1, val: 0, onchange: function(v){$('#t8').html(v)}});
	$('#rating9').stars({stars: 10,step:1,onchange: function(v){$('#t9').html(v)}});
	$('#rating10').stars({rated:true,stars:5,val:2.5});
		
})
</script>
</body>
</html>
